<template>
  <my-layout :tabbar-is-show="false" :is-absolute-body="false">
    <template #TopBackground>
      <my-top-background />
    </template>
    <template #Navbar>
      <view
        style="
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          position: relative;
        "
      >
        <image
          @click="goback()"
          :src="indexTabBarUrl.navigateBack"
          style="width: 30rpx; height: 30rpx; margin-left: 40rpx"
        />
        <view
          style="
            font-weight: bold;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
          "
        >
          <view style="display: flex; align-items: center; column-gap: 10rpx">
            <image
              :src="indexTabBarUrl.starFace"
              style="width: 60rpx; height: 60rpx"
            />
            <view>赵本山</view>
          </view>
        </view>
      </view>
    </template>
    <template #Body>
      <view style="height: 100%; display: flex; flex-direction: column">
        <view
          v-if="messageList.length === 0"
          style="
            flex: 1;
            padding: 42rpx 66rpx;
            background-color: #fff;
            margin-top: 20rpx;
            font-size: 26rpx;
            color: #666;
          "
          >欢迎您发送私信，演员明星收到您的私信后将仔细阅读，还可能公开诵读。</view
        >
        <view
          style="
            flex: 1;
            min-height: 0;
            padding: 34rpx;
            background-color: #fff;
            margin-top: 20rpx;
          "
        >
          <scroll-view
            class="scroll-view"
            style="height: 100%"
            :scroll-y="true"
            enhanced
            :show-scrollbar="false"
          >
            <view style="display: flex; flex-direction: column; row-gap: 92rpx">
              <template v-for="item of messageList">
                <!--自己的消息-->
                <view
                  v-if="item.isSelf"
                  style="
                    display: flex;
                    justify-content: flex-end;
                    column-gap: 20rpx;
                  "
                >
                  <view
                    v-if="item.type === 'text'"
                    style="
                      max-width: 100%;
                      overflow-wrap: break-word;
                      word-break: break-all;
                      white-space: pre-wrap;
                      background-color: #95ec69;
                      border-radius: 10rpx;
                      padding: 20rpx;
                    "
                    >{{ item.content }}</view
                  >
                  <image
                    :src="indexTabBarUrl.starFace"
                    style="width: 60rpx; height: 60rpx; flex-shrink: 0"
                  />
                </view>
                <!--别人的消息-->
                <view
                  v-if="!item.isSelf"
                  style="
                    display: flex;
                    justify-content: flex-start;
                    column-gap: 20rpx;
                  "
                >
                  <image
                    :src="indexTabBarUrl.starFace"
                    style="width: 60rpx; height: 60rpx; flex-shrink: 0"
                  />
                  <view
                    v-if="item.type === 'text'"
                    style="
                      max-width: 100%;
                      overflow-wrap: break-word;
                      word-break: break-all;
                      white-space: pre-wrap;
                      background-color: #f2f3f5;
                      border-radius: 10rpx;
                      padding: 20rpx;
                    "
                    >{{ item.content }}</view
                  >
                </view>
              </template>
            </view>
          </scroll-view>
        </view>
        <!--发消息-->
        <view class="private_edit">
          <view class="edit_input">
            <image
              v-if="inputVal.length === 0"
              :src="editPen"
              style="
                position: absolute;
                top: 22rpx;
                left: 180rpx;
                width: 22rpx;
                height: 22rpx;
              "
            />
            <input
              class="e_i_input"
              v-model="inputVal"
              placeholder="发送私信"
              type="text"
              :adjust-position="false"
            />
          </view>
          <view class="private_send" @click="send"><text>发送</text></view>
        </view>
        <!--上推键盘-->
        <view
          v-if="keyboardHeight > 0"
          :style="{
            height: `calc(${keyboardHeight}px + 0rpx)`,
            width: '100%',
          }"
        ></view>
      </view>
    </template>
  </my-layout>
</template>

<script>
/**
 * @typedef Message
 * @property {'text' | 'card'} type 内容类型，text:文本，card:卡片
 * @property {boolean} isSelf 是否是自己的消息
 * @property {object | string} content 消息内容，可能是复杂内容，如card，或简单内容，如文本
 */
import editPen from "@/static/images/edit-pen.png";
import indexTabBarUrl from "@/url/index_tabBar";
import ElementInfo from "@/utils/element-info";
export default {
  name: "private-letter",
  data() {
    return {
      editPen,
      indexTabBarUrl,
      /**
       * @type {Message[]}
       */
      messageList: [
        {
          type: "text",
          isSelf: true,
          content: "在吗",
        },
        {
          type: "text",
          isSelf: false,
          content: "在",
        },
        {
          type: "text",
          isSelf: false,
          content: "在",
        },
        {
          type: "text",
          isSelf: false,
          content: "在",
        },
        {
          type: "text",
          isSelf: false,
          content: "在",
        },
        {
          type: "text",
          isSelf: false,
          content: "在",
        },
        {
          type: "text",
          isSelf: false,
          content: "在",
        },
      ],
      inputVal: "",
      keyboardHeight: 0,
    };
  },
  async mounted() {
    let scrollToBottomWrap = this._.throttle(this.scrollToBottom, 300, {
      leading: false,
      trailing: true,
    });
    await scrollToBottomWrap();
    wx.onKeyboardHeightChange((res) => {
      console.log("键盘高度变化", res.height);
      this.keyboardHeight = res.height;
      this.$nextTick(async () => {
        await scrollToBottomWrap();
      });
    });
  },
  methods: {
    goback() {
      uni.navigateBack();
    },
    async scrollToBottom() {
      let scrollViewInfo = await ElementInfo.getElementInfo(
        this,
        ".scroll-view"
      );
      console.log("scrollViewInfo", scrollViewInfo);
      // 获取滚动元素
      let node = scrollViewInfo.node;
      // 获取滚动元素高度
      let scrollHeight = scrollViewInfo.scrollHeight;
      // 滚动top到滚动元素的高度位置
      node.scrollTo({ top: scrollHeight, animated: true });
    },
    send() {
      if (this.inputVal.trim().length === 0) {
        wx.showToast({
          title: "不能发送空消息",
          icon: "error",
          mask: true,
        });
        this.inputVal = "";
        return;
      }
      this.messageList.push({
        type: "text",
        isSelf: true,
        content: this.inputVal,
      });

      this.messageList.push({
        type: "text",
        isSelf: false,
        content: `我收到了你的消息: ${this.inputVal}`,
      });
      this.inputVal = "";
      this.$nextTick(async () => {
        await this.scrollToBottom();
      });
    },
  },
};
</script>
<style>
@import "@/static/css/others.css";
</style>
